<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../org/angular.min.js"></script>
    <style>
        .red {
            color: red;
        }
        .font {
            font-size: 100px;
        }
        .yellow {
            color: yellow;
        }
        .blue {
            background-color: blue;
        }
        .pink {
           background-color: pink;
        }
    </style>
</head>
<body ng-app="vm">
    <div ng-controller="ctrl">
        <span>{{msg}}</span>
        <input type="radio" value="1" ng-model="msg">
        开启
        <span>{{msg}}</span>
        <input type="radio" value="0" ng-model="msg">
        关闭
        <div ng-show="msg==1">
            <h2>关闭原因</h2>
            <textarea>网页正在维护～～～</textarea>
        </div>
        <hr/>
        <br/>
        <input type="checkbox" ng-model="status">{{status}}
        <br/>
        <div ng-class="{red: status,font: status}">
         显示隐藏
        </div>

        <hr/>
        <br/>
        <table>
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
            </tr>
            <tr ng-repeat="item in data" ng-class-odd="{blue:true}" ng-class-even="{pink:true}" ng-class="{red: item.status==0}">
                <td>{{item.id}}</td>
                <td ng-class="{yellow:item.age<25}">{{item.username}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>


    </div>
    <script>
        var vm = angular.module('vm',[]);
        vm.controller('ctrl',['$scope',function($scope){
            $scope.msg=0;
            $scope.status=true;
            $scope.data = [
                {id:1,username:'小明','age': 22,status:0},
                {id:2,username:'李白','age':99,status:1},
                {id: 3,username: '张三','age':123,status:0 },
                {id:4, username:'hdphp','age':50,status: 0}
            ]
        }])
    </script>
</body>
</html>